<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
			margin: auto 0px;
		}
		
		.first{
			width: 1024px;
			padding: 20px;
			margin: 10px auto 0;
		}
		h2{
			text-align: center;
		}
		.l{
			background: red;
			width: 150px;
			height: 220px;
			
		}
		.l1{
			background: lavender;
			width: 150px;
			height: 220px;
		}
		.l2{
			background:green;
			width: 150px;
			height: 220px;
		}
		.l3{
			background:pink;
			width: 150px;
			height: 220px;
		}
		.l4{
			background:aquamarine;
			width: 150px;
			height: 220px;
		}
		.l5{
			background:salmon;
			width: 150px;
			height: 220px;
		}
		.list{
			display: flex;
			margin: 30px;
			list-style-type: none;
			
		}
		li{
			
			text-align: center;
			margin-right: 10px;
			margin-top: 50px;
		}
		
		.l:hover{
			width: 170px;
			height: 240px;
		}
		.l1:hover{
			width: 170px;
			height: 240px;
		}
		.l2:hover{
			width: 170px;
			height: 240px;
		}
		.l3:hover{
			width: 170px;
			height: 240px;
		}
		.l4:hover{
			width: 170px;
			height: 240px;
		}
		.l5:hover{
			width: 170px;
			height: 240px;
		}
		</style>
	</head>
	<body>
		<div class="first">
			<h2>响应式滑动菜单</h2>
			<ul class="list">
				
				<div class="l" >
					<li>
					<img src="../img/2.png"/><br/>
					<span>Home</span>
					</li>
				</div>
				
				<div class="l1">
						<li>
						<img src="../img/3.png"/><br/>
						<span>Services</span>
						</li>
					</div>
				<div class="l2">
						<li>
						<img src="../img/4.png"/><br/>
						<span>Portfolio</span>
						</li>
				</div>
				<div class="l3">
					<li>
					<img src="../img/5.png"/><br/>
					<span>Blog</span>
					</li>
				</div>
				<div class="l4">
					<li>
					<img src="../img/6.png"/><br/>
					<span>The team</span>
					</li>
				</div>
				<div class="l5">
					<li>
					<img src="../img/7.png"/><br/>
					<span>Contact</span>
					</li>
				</div>
			</ul>
		</div>
	</body>
</html>
